<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sports</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- //fonts -->
</head>
  <body>

   <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="Search...">
					<input type="submit" value=" ">
				</form>
			</div>
			<div class="header-top-right">
				<!--  Object obj = session.getAttribute("user");> -->
					<% if (session.getAttribute("user") != null) {%>				  
    						  <div class="header-right">
    							<li class="dropdown">
    									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    		                            <img src="${sessionScope.user.header}" style="width:50px;height:50px;border-radius:50px">
    		                                <span class="username" ><font size="+1">您好，${sessionScope.user.name}</font></span>
    		                                <span id="userID" style="display:none">${sessionScope.user.userID }</span>
    									<strong class="caret"></strong>
    									</a>
    									<ul class="dropdown-menu">
    										<li><a href="#"><i class="icon-user"></i> 个人主页</a></li>
    										<li><a href="#"><i class="icon-tasks"></i> 修改个人信息</a></li>
    										<li><a href="#"><i class="icon-calendar"></i>个人视频</a></li>
    										<li class="divider"></li>
    										<li><a href="logout"><i class="icon-key"></i>注销</a></li>
    									</ul>
    								</li>
    						</div>
								<% } else { %>
   							   	<div class="signin">
					<a href="#small-dialog3" class="play-icon popup-with-zoom-anim">注册</a>
					<span id="userID" style="display:none"></span>
					<!-- pop-up-box -->
									<script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
									<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
									<link href="css/checkCode.css" rel="stylesheet" type="text/css" media="all"/>
									<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
									<script src="js/signValidation.js" type="text/javascript"></script>
						<!--			<script src="js/checkCode.js" type="text/javascript"></script>-->
									<!--//pop-up-box -->
									<div id="small-dialog3" class="mfp-hide">
										<h3>创建账户</h3>
										<div class="social-sits">
											<div class="facebook-button">
												<a href="#">QQ账号登录</a>
											</div>
											<div class="chrome-button">
												<a href="#">微信账号登录</a>
											</div>
											<div class="button-bottom">
												<p>已经有账号？ <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
											</div>
										</div>
										<div class="signup">
										<script type="text/javascript" src="js/md5.js"></script>
												<script language="javascript">
												    function SubmitForm() {
												    
												        document.getElementById("pwd").value = hex_md5(document.getElementById("pwd").value);
												        //document.form1.submit
												    }
												</script>
										
											<form name="form1" method="post" action="register">
												<input type="text" class="email" id="name-vali" name="name" placeholder="昵称" required="required" title="输入昵称"/>
												<p id="nickname.info" style="color:red"></p>
												<input type="text" class="email" style="width: 60%;" id="txt-code" maxlength="6" placeholder="验证码" required="required" title="输入验证码"/>
												<p id="txt-code.info" style="color:red"></p>
												<canvas width="30%" style=" float: right;" id="codeCanvas" onclick="createCode()">对不起，当前浏览器不支持此验证码</canvas>
												<input type="text" class="email" id="email-vali"placeholder="Email" name="email" required="required" title="输入有效的邮箱地址"/>
												<p id="email-vali.info" style="color:red"></p>
												<input type="text" class="email" style="width:60%;float: left;" id="email-code" placeholder="邮箱验证" required="required" title="输入邮箱验证码"/>

												<!--<input type="button" value="发送验证码"/>-->
												<button type="button" style="float: right;width: 30%;height: 42px;">发送验证码</button>
												<input type="password" id="pwd" name="pwd" placeholder="密码" required="required" title="至少6位，必须包括大小写字符、数字" autocomplete="off" />
												<p id="pwd.info" style="color:red"></p>
												<input type="password" id="pwd-vali" placeholder="确认密码" required="required" title="再次输入以确认密码" autocomplete="off"/>
												<p id="pwd-vali.info" style="color:red"></p>
												<input type="submit" class="signup-vali" value="注册" onclick="SubmitForm()"/>
											</form>
										</div>
										<div class="clearfix"> </div>
									</div>	
									<div id="small-dialog7" class="mfp-hide">
										<h3>创建账户</h3>
										<div class="social-sits">
											<div class="facebook-button">
												<a href="#">QQ账号登录</a>
											</div>
											<div class="chrome-button">
												<a href="#">微信账号登录</a>
											</div>
											<div class="button-bottom">
												<p>已经有账号？ <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
											</div>
										</div>
										<div class="signup">
											<form action="upload.html">
												<input type="text" name="email-login1" class="email" id="email-login1" placeholder="Email" required="required" title="输入有效的邮箱地址"/>
												<p id="email-login1.info" style="color:red"></p>
												<input type="password" name="pwd-login1" id="pwd-login1" placeholder="密码" required="required" title="至少6个字符" autocomplete="off" />
												<p id="pwd-login1.info" style="color:red"></p>
												<input type="submit"  value="Sign In"/>
											</form>
										</div>
										<div class="clearfix"> </div>
									</div>		
									<div id="small-dialog4" class="mfp-hide">
										<h3>Feedback</h3> 
										<div class="feedback-grids">
											<div class="feedback-grid">
												<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											</div>
											<div class="button-bottom">
												<p><a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign in</a> to get started.</p>
											</div>
										</div>
									</div>
									<div id="small-dialog5" class="mfp-hide">
										<h3>Help</h3> 
											<div class="help-grid">
												<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											</div>
											<div class="help-grids">
												<div class="help-button-bottom">
													<p><a href="#small-dialog4" class="play-icon popup-with-zoom-anim">Feedback</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Lorem ipsum dolor sit amet</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Nunc vitae rutrum enim</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris at volutpat leo</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris vehicula rutrum velit</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Aliquam eget ante non orci fac</a></p>
												</div>
											</div>
									</div>
									<div id="small-dialog6" class="mfp-hide">
										<div class="video-information-text">
											<h4>Video information & settings</h4>
											<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											<ol>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
											</ol>
										</div>
									</div>
									<script>
											$(document).ready(function() {
											$('.popup-with-zoom-anim').magnificPopup({
												type: 'inline',
												fixedContentPos: false,
												fixedBgPos: true,
												overflowY: 'auto',
												closeBtnInside: true,
												preloader: false,
												midClick: true,
												removalDelay: 300,
												mainClass: 'my-mfp-zoom-in'
											});
																											
											});
									</script>	
				</div>
								<div class="signin">
					<a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
					<div id="small-dialog" class="mfp-hide">
						<h3>登录</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">QQ账号登录</a>
							</div>
							<div class="chrome-button">
								<a href="#">微信账号登录</a>
							</div>
							<div class="button-bottom">
								<p>还没有账号？ <a href="#small-dialog3" class="play-icon popup-with-zoom-anim">注册</a></p>
							</div>
						</div>
						<div class="signup">
							<script type="text/javascript" src="js/md5.js"></script>
												<script language="javascript">
												    function submitForm() {
												    
												        document.getElementById("pwd-login2").value = hex_md5(document.getElementById("pwd-login2").value);
												        //document.form1.submit
												    }
												</script>
							<form action="doLogin" method="get">
								<input type="text" class="email" id="account-login" name="name"  placeholder="邮箱/手机" required="required" />
								<p id="account-login.info" style="color:red"></p>
								<input type="password" id="pwd-login2" name="pwd" placeholder="密码" required="required" autocomplete="off" />
								<p id="pwd-login2.info" style="color:red"></p>
								<input type="submit" id="login2" value="登录" onclick="submitForm()"/>
							</form>
							<div class="forgot">
								<a href="#">忘记密码？</a>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
									<% } %>
				<div class="clearfix"> </div>
			</div>
        </div>
		<div class="clearfix"> </div>
      </div>
    </nav>
       <div class="col-sm-3 col-md-2 sidebar">
			<div class="top-navigation">
				<div class="t-menu">MENU</div>
				<div class="t-img">
					<img src="images/lines.png" alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
				<div class="drop-navigation drop-navigation">
				  <ul class="nav nav-sidebar">
					<li class="active"><a href="loginuser" class="home-icon"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
					
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影" class="menu1"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>电影<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-2">
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#">浪漫</a></li>                                             
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#scare">惊悚</a></li>
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#lunli">伦理</a></li> 
						</ul>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu1" ).click(function() {
							$( "ul.cl-effect-2" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧" class="menu"><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>电视剧<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-1">
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#">校园</a></li>                                             
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#old">古装</a></li>
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#family">家庭</a></li> 
						</ul>
						<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=生活" class="user-icon"><span class="glyphicon glyphicon-home glyphicon-blackboard" aria-hidden="true"></span>生活</a></li>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=新闻" class="sub-icon"><span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>新闻</a></li>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu" ).click(function() {
							$( "ul.cl-effect-1" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=综艺" class="song-icon"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>综艺</a></li>
				  </ul>
				  <!-- script-for-menu -->
						<script>
							$( ".top-navigation" ).click(function() {
							$( ".drop-navigation" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<div class="side-bottom">
						<!--<div class="side-bottom-icons">
							<ul class="nav2">
								<li><a href="#" class="facebook"> </a></li>
								<li><a href="#" class="facebook twitter"> </a></li>
								<li><a href="#" class="facebook chrome"> </a></li>
								<li><a href="#" class="facebook dribbble"> </a></li>
							</ul>
						</div>-->
						<div class="copyright">
							<p>Copyright &copy; 2018.Team3 All rights reserved.Podcast <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">大学生播客</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">Team3</a></p>
						</div>
					</div>
				</div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="main-grids">
				<div class="recommended">
					<div class="recommended-grids english-grid">
						<div class="recommended-info">
							<div class="heading">
								<h3>校园</h3>
							</div>
						
							<div class="clearfix"> </div>
						</div>
						<c:forEach items="${requestScope.videos}" var="video" varStatus="loop">
						<c:if test="${video.categoryID == '6'}">
						<div class="col-md-4 resent-grid recommended-grid slider-top-grids">
						<div class="resent-grid-img recommended-grid-img">
							<a href="<%=basePath%>/playVideo?videoID=${video.videoID}"><img src="${video.cover }" alt="" /></a>
							<div class="time">
								<p>${video.totalTime }</p>
							</div>
							<div class="clck">
								<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
							</div>
						</div>
						<div class="resent-grid-info recommended-grid-info">
							<h3><a href="<%=basePath%>/playVideo?videoID=${video.videoID}" class="title title-info">${video.title }</a></h3>
							<ul>
								<li><p class="author author-info"><a href="#" class="author">${requestScope.userName[loop.count-1]}</a></p></li>
								<li class="right-list"><p class="views views-info">${video.clickCount } views</p></li>
							</ul>
						</div>
						</div>
						</c:if>
						</c:forEach>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="recommended">
					<div class="recommended-grids">
						<div class="recommended-info">
							<div class="heading">
								<h3>古装</h3>
							</div>
						
							<div class="clearfix"> </div>
						</div>
						<c:forEach items="${requestScope.videos}" var="video" varStatus="loop">
						<c:if test="${video.categoryID == '5'}">
						<div class="col-md-4 resent-grid recommended-grid slider-top-grids">
						<div class="resent-grid-img recommended-grid-img">
							<a href="<%=basePath%>/playVideo?videoID=${video.videoID}"><img src="${video.cover }" alt="" /></a>
							<div class="time">
								<p>${video.totalTime }</p>
							</div>
							<div class="clck">
								<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
							</div>
						</div>
						<div class="resent-grid-info recommended-grid-info">
							<h3><a href="<%=basePath%>/playVideo?videoID=${video.videoID}" class="title title-info">${video.title }</a></h3>
							<ul>
								<li><p class="author author-info"><a href="#" class="author">${requestScope.userName[loop.count-1]}</a></p></li>
								<li class="right-list"><p class="views views-info">${video.clickCount } views</p></li>
							</ul>
						</div>
						</div>
						</c:if>
						</c:forEach>
						
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="recommended">
					<div class="recommended-grids">
						<div class="recommended-info">
							<div class="heading">
								<h3>家庭</h3>
							</div>
							
							<div class="clearfix"> </div>
						</div>
						<c:forEach items="${requestScope.videos}" var="video" varStatus="loop">
						<c:if test="${video.categoryID == '7'}">
						<div class="col-md-4 resent-grid recommended-grid slider-top-grids">
						<div class="resent-grid-img recommended-grid-img">
							<a href="<%=basePath%>/playVideo?videoID=${video.videoID}"><img src="${video.cover }" alt="" /></a>
							<div class="time">
								<p>${video.totalTime }</p>
							</div>
							<div class="clck">
								<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
							</div>
						</div>
						<div class="resent-grid-info recommended-grid-info">
							<h3><a href="<%=basePath%>/playVideo?videoID=${video.videoID}" class="title title-info">${video.title }</a></h3>
							<ul>
								<li><p class="author author-info"><a href="#" class="author">${requestScope.userName[loop.count-1]}</a></p></li>
								<li class="right-list"><p class="views views-info">${video.clickCount } views</p></li>
							</ul>
						</div>
						</div>
						</c:if>
						</c:forEach>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		</div>
		<div class="clearfix"> </div>
	<div class="drop-menu">
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
		  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
		  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
		  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
		</ul>
	</div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
  </body>
</html>